<!--
 * @Description: 渠道信息页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-14 21:31:44
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-08 09:19:05
 -->
<template>
  <div>
    <div class="user pd orderlist app-container">
      <eHeader :query="query"/>

      <el-table v-loading.body="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" element-loading-text="拼命加载中" stripe border fit row-key="id" class="custom-table">
        <el-table-column label="渠道名称" prop="name" align="left" />
        <el-table-column label="渠道编码" prop="code" align="center" width="150px" />
        <el-table-column label="渠道等级" prop="level" align="center" width="150px" />
        <el-table-column label="渠道状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ channelStatus[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="渠道描述" prop="description" align="center" />
        <el-table-column label="操作" width="320" align="center">
          <template slot-scope="scope">
            <addSecond v-if="+scope.row.level === 1" key="1" :parent-id="scope.row.id" :sup_this="sup_this" />
            <addThird v-if="+scope.row.level === 2" key="2" :parent-id="scope.row.id" :sup_this="sup_this" />
            <edit v-if="+scope.row.level === 1" key="3" :data="scope.row" :sup_this="sup_this" />
            <editSecond v-if="+scope.row.level === 2" key="4" :data="scope.row" :sup_this="sup_this" />
            <editThird v-if="+scope.row.level === 3" key="5" :data="scope.row" :sup_this="sup_this" />
            <el-button v-if="scope.row.status == 0" key="6" size="mini" type="primary" @click="changeAttribute(1, scope.row.id, 'status')">启用 </el-button>
            <el-button v-if="scope.row.status == 1" key="7" size="mini" type="danger" @click="changeAttribute(0, scope.row.id, 'status')">禁用 </el-button>
            <el-button v-if="scope.row.level == 3 && scope.row.status == 1" key="7" size="mini" type="warning" @click="generateWxQrcode(scope.row.code)"> 微信二维码 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination 
          :current-page.sync="tableQuery.page" 
          :page-sizes="[10, 20, 50]"
          :page-size="tableQuery.limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange"
          @current-change="pageChange" 
        />
      </div>
    </div>
  </div>
</template>
<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import load from '@/views/components/loading1'
import jsonEditor from '@/views/components/jsonEditor'
import eHeader from './module/header'
import edit from './module/edit'
import editSecond from './module/editSecond'
import addSecond from './module/addSecond'
import editThird from './module/editThird'
import addThird from './module/addThird'

export default {
  components: {
    load, jsonEditor, eHeader, edit, editSecond, editThird, addSecond, addThird
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': 'danger',
        '1': 'primary'
      }
      return statusMap[status]
    }
  },
  mixins: [initData],
  data() {
    return {
      sup_this: this,
      query: {},
      cascaderChannels: [],
      cascaderSecondChannels: [],
      formTitle: null,
      formTopVisible: false,
      formVisible: false,
      tableQuery: {
        limit: 20,
        page: 1,
        status: 1,
        name: null,
        code: null,
        level: [3]
      },
      activeTabName: 'first',
      firstIsDisable: false,
      secondIsDisable: false,
      activeSonTabName: 'reply',
      channelStatus: {
        0: '禁用',
        1: '启用'
      },
      isJsonC: false,
      isJsonWechat: false,
      topChannels: {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
    this.getCascaderChannels()
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = '/admin/v1/channel'
      const sort = 'id,desc'
      this.params = { page: this.page, limit: this.limit, sort: sort }
      const query = this.query
      if (query.name) { this.params['name'] = query.name }
      if (query.code) { this.params['code'] = query.code }
      return true
    },
    getCascaderChannels() {
      this.$api.enterprise.channel
        .cascade()
        .then(res => {
          // let retChannels = res.data
          // let primaryChannels = Object.keys(retChannels).map(index => {
          //   let childrenChannels = Object.keys(retChannels[index].children).map(childrenIndex => {
          //     return {
          //       label: retChannels[index].children[childrenIndex].name,
          //       value: retChannels[index].children[childrenIndex].id
          //     }
          //   })
          //   return {
          //     label: retChannels[index].name,
          //     value: retChannels[index].id,
          //     children: childrenChannels
          //   }
          // })
          // this.cascaderChannels = primaryChannels
        }).catch(err => {
          console.log(err)
          this.$notify({ title: '提示', message: err, type: 'error', duration: 2500 })
        })
    },
    changeAttribute(val, id, attribute) {
      const _this = this
      _this.tableLoading = true
      const params = {
        id: id,
        attribute: attribute,
        value: val
      }
      // api.GET(apiConfig.channel.channel.changeAttribute, params, res => {
      //   _this.$notify({ title: '提示', message: '渠道修改成功', type: 'success', duration: 1500 })
      //   _this.getList()
      // }, res => {
      //   _this.$notify({ title: '错误', message: res.msg, type: 'error', duration: 1500 })
      //   _this.tableLoading = false
      // })
    },
    generateWxQrcode(channel) {
      this.$api.enterprise.channel
        .generateWxQrcode(channel)
        .then(res => {
          window.open(res.data.url)
        }).catch(err => {
          console.log(err)
        })
    },
    handleReset() {
      this.tableQuery = {
        limit: 20,
        page: 1,
        status: null,
        name: null,
        code: null
      }
      this.getList()
    },
  }
}
</script>

<style scoped>
.app-main {
  padding: 0;
}
</style>

<style>
.el-table__expanded-cell {
  padding: 10px !important;
}
.custom-table .el-button+.el-button {
  margin-left: 0 !important;
}
</style>
